<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../head.jsp"%>
<!-- Swiper CSS -->
<link href="${ctx}/resource/css/swiper.css?v=${nowTime}" rel="stylesheet" type="text/css" />
<!-- Swiper JS -->
<script type="text/javascript" src="${ctx}/resource/js/swiper.jquery.min.js"></script>
<style>
._title{border-bottom: 1px solid #00B4A8;background-color: white;}
._headbar{background-color:#00B4A8; color: white;}
._footbar{margin: 0px;position: fixed;left: 0px;right: 0px;bottom: 0px;z-index: 100;border-top:1px solid #00B4A8; }
.active{background-color:#FBF9FE;color: #00B4A8;}
._pannelMore{position:fixed;top:0;right:0;bottom:0;left:100%;background-color:white;height:100%;z-index: 199;
-webkit-overflow-scrolling: touch; overflow-y: scroll;}
iframe{margin: -1px;border: 0px;padding: -1px;}
.loadDiv{position:absolute;width:100%;z-index:400;line-height:50px;
background: rgba(55,55,55,0.95) !important;color: #C6C6C6;height: 0px;overflow: hidden;box-shadow:0px 0px 50px #313131;}
.loadBody{}
.swiper-slide{-webkit-overflow-scrolling: touch;}
</style>
<div class="_pannel  _rowP _headbar" >
	<span class="g-6-24 TAC"><label style="font-weight: bolder;">XX之家</label></span>
	<span class="g-14-24"><input type="text" class="_MT5 topSearch" style="background-color: rgba(0,0,0,0.1);color: white;" readonly="readonly"/> </span> 
	<span class="g-4-24 TAR ">
		<img alt="" src="${ctx}/resource/img/tx.png" class="_MR10" style="width: 30px;height: 30px;border-radius:15px;border: 2px solid white;margin-top: 3px;z-index: 300; " onclick="showPM('${ctx}/news.html')"/> 
	</span>
	<div class="clear"></div>
</div>
<div class="tab1">
	<div class="_pannel _title"> </div>
	<div class="_pannel _body" > </div>
</div>
<div class="tab2 ">
	<div class="_pannel _title"> </div>
	<div class="_pannel _body" > </div>
</div>
<div class="tab3">
	<div class="_pannel _title"> </div>
	<div class="_pannel _body" > </div>
</div>
<div class="_pannelMore ">
	<div class="_headbar _PL10 _PR10 TAR" style="line-height: 40px;height: 40px;">
		<span class="_PR20 _PL20" style="display: inline-block;height:30px;background:url('${ctx}/resource/img/icon-share.png') no-repeat center;background-size:20px;">&nbsp;</span>
		<span class="_PR20 _PL20" onclick="showAlert();" style="display: inline-block;height:30px;background:url('${ctx}/resource/img/icon-share.png') no-repeat center;background-size:20px;">&nbsp;</span>
  		<span class="_PR20 _PL20" onclick="closePM()" style="display: inline-block;height: 30px;background:url('${ctx}/resource/img/icon-right.png') no-repeat center;background-size:25px;">&nbsp;</span>  
	</div>
	<div class="iframe">
		<iframe src="" name="ifrm" id="ifrmPannel"></iframe>
	</div>
</div>
<div class="_pannel  TAC _rowP _footbar" style="overflow: hidden;width: inherit;" >
	<span class="g-1-3 active" onclick="doTab(1,this)">首页</span>
	<span class="g-1-3" onclick="doTab(2,this)">论坛</span> 
	<span class="g-1-3" onclick="doTab(3,this)">我的</span>
</div> 
<script type="text/javascript">
	var lala='<div style="line-height: 40px;text-align: center;color: #D4D4D4;" >~~&nbsp;(๑≧∀≦๑)&nbsp;~~</div>';
	var curTab="";
	var curPage=0;
	//=================================
	window.onresize=AutoSize();
	function AutoSize(){
		$("._pannelMore").css("left",$(window).width()+'px');
		$("#ifrmPannel").height($(window).height()-40); 
 		$("#ifrmPannel").width($(window).width()); 
		$(".bodycont").height($(window).height()-40*2+5+"px");
	};
	//===加载页面 
	var loadTime=1000*60*5;
	//var loadTime=1000*30;//页面加载频率 
	var urlMap=[];
	function loadPage(tab,i,t){
		var xTime=typeof(t)=="undefined"?loadTime:t;
		curPage=i;
		var url="${ctx}/"+title[tab-1][i][1]+".html";
		var bo=false;
		var c=0;
		var t=new Date().getTime();
		for(var j in urlMap){
			var k=urlMap[j][0];
			var v=urlMap[j][1];
			if(k==url && t-v<xTime){
				bo=true;
				c++;
				break;
			}else if(k==url && t-v>=xTime){
				urlMap[j]=[k,t];
				bo=false; 
				c++;
				break;
			}
		}
		if(bo){
			return true;
		}
		if(c==0){
			urlMap.push([url,t]); 
		}
		$("#loadingModel").fadeIn();
		sendRequest(url, {}, function(data){
			console.log("加载:.page_"+(tab-1)+"_"+i);  
			$(".page_"+(tab-1)+"_"+i+" .loadBody").html(data+lala);
			$("#loadingModel").fadeOut();
			fixBody();
		});
	}
	function doTab(i,obj){
		if(curTab!=tabs[i-1]){
			$(obj).parent().children().removeClass("active");
			$(obj).addClass("active");
			$(curTab).hide();
			curTab=tabs[i-1];
			$(curTab).show();
		}
	}
	var lastIfrmUrl="";
	function showPM(src){
		window.open(src);   
		/* $("._pannelMore").css("left",$(window).width()+'px');
		if(lastIfrmUrl!=src){
			$("#ifrmPannel").contents().find("body").html('<div style="margin-top: 48%;line-height: 30px;color:#ADADAA;text-align: center; ">加载中...(๑･ิω･ิ)っ~~</div>');  
		}
		$("._pannelMore").animate({left:'0px'},"fast",function(){
			if(lastIfrmUrl!=src){
				$("#ifrmPannel").attr("src",src);   
			}
			lastIfrmUrl=src;
			fixBody();
		}); */
	}
	function closePM(){
		$("._pannelMore").animate({left:$(window).width()+'px'},"fast");
		
	}
	
	//========================================================================
	var tabs=[".tab1",".tab2",".tab3"];
	var title=[
       	[["头条","news/getNewsList"],["动弹",""],["档案",""],["产品",""],["诚聘",""],["接口",""]],
    	[["支付学院",""],["资料共享",""],["企业服务",""],["交流互动",""],["曝光台",""]],
    	[["aa",""]]
    ]; 
	$(function(){
		//=====================
		for(var t in tabs){
			$(tabs[t]+" ._title").append('<div class="swiper-container sw_title"><div class="swiper-wrapper TAC" style="line-height: 31px;"></div></div>');
			$(tabs[t]+" ._body").append('<div class="swiper-container sw_body"><div class="swiper-wrapper"></div></div>');
			var sw_ts=$(tabs[t]+" .sw_title .swiper-wrapper");
			var sw_bs=$(tabs[t]+" .sw_body .swiper-wrapper");
			for(var i in title[t]){
				//title 
				sw_ts.append('<div class="swiper-slide '+(i==0?'active':'')+'">'+title[t][i][0]+'</div>');
				//body 
				var body='<div class="swiper-slide bodycont _bgc page_'+t+'_'+i+'" style="overflow-y: auto; overflow-x:hidden;" >'
				 +'<div class="TAC loadDiv">。。下拉加载新玩意儿。。</div><div class="loadBody"></div>'
				 +'</div>';
				 sw_bs.append(body);
			};
		}
		//=============================
		AutoSize();
		loadPage(1,0);//加载tab1的下标为0的页面 
		curTab=tabs[0];
		//================================================
		var ms1b = new Swiper(".tab1 .sw_body", {
			observeParents:true,
			onSlideChangeStart : function() {loadChange(".tab1",ms1t,ms1b);}
		});
		var ms1t = new Swiper(".tab1 .sw_title", {
			watchSlidesProgress : true,
			watchSlidesVisibility : true,
			slidesPerView : 5,
			onTap : function() {ms1b.slideTo(ms1t.clickedIndex)}
		});
	 	var ms2b = new Swiper(".tab2 .sw_body", {
			observeParents:true,
			onSlideChangeStart : function() {loadChange(".tab2",ms2t,ms2b);}
		});
		var ms2t = new Swiper(".tab2 .sw_title", {
			watchSlidesProgress : true,
			watchSlidesVisibility : true,
			slidesPerView : 5,
			onTap : function() {ms2b.slideTo(ms2t.clickedIndex)}
		});
		var ms3b = new Swiper(".tab3 .sw_body", {
			observeParents:true,
			onSlideChangeStart : function() {loadChange(".tab3",ms3t,ms3b);}
		});
		var ms3t = new Swiper(".tab3 .sw_title", {
			watchSlidesProgress : true,
			watchSlidesVisibility : true,
			slidesPerView : 5,
			onTap : function() {ms3b.slideTo(ms3t.clickedIndex)}
		}); 
		$(".tab2,.tab3").hide();
		//==================================================
		function loadChange(tab,mst,msb){
			$(tab+' .sw_title .active').removeClass('active')
			var activeNav = $(tab+' .sw_title .swiper-slide').eq(msb.activeIndex).addClass('active');
			if (!activeNav.hasClass('swiper-slide-visible')) {
				if (activeNav.index() > mst.activeIndex) {
					var thumbsPerNav = Math.floor(mst.width / activeNav.width()) - 1
					mst.slideTo(activeNav.index() - thumbsPerNav)
				} else {
					mst.slideTo(activeNav.index())
				}
			}
			//==========loadPage
			loadPage(tab.substring(tab.length-1),msb.activeIndex); 
		}
 		fixBody();
 		isTouchDevice();//下拉加载 
	});
	function fixBody(){
		$("input").unbind("focus").bind("focus",function(){
			$("._footbar").hide();
		});
		$("input").unbind("blur").bind("blur",function(){
			$("._footbar").show();
		});
	}
	//==================================================================
	//全局变量，触摸开始位置  
	var startTouchX = 0, startTouchY = 0;
	//touchstart事件  
	var $touchCur;
	var $touchCurPage;
	function touchSatrtFunc(evt) {
		try {
			var curt=curTab.substring(curTab.length-1);
			$touchCurPage=$(".page_"+(curt-1)+"_"+curPage);
			$touchCur=$touchCurPage.find(".loadDiv"); 
			// evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
			var touch = evt.touches[0]; //获取第一个触点  
			var x = Number(touch.pageX); //页面触点X坐标  
			var y = Number(touch.pageY); //页面触点Y坐标  
			//记录触点初始位置  
			startTouchX = x;
			startTouchY = y;
		} catch (e) {
			alert('touchSatrtFunc：' + e.message);
		}
	}

	//touchmove事件，这个事件无法获取坐标  
	var isDoLoad=false;
	function touchMoveFunc(evt) {
		try {
			//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
			var touch = evt.touches[0]; //获取第一个触点  
			var x = Number(touch.pageX); //页面触点X坐标  
			var y = Number(touch.pageY); //页面触点Y坐标  
			//判断滑动方向  
			if (x - startTouchX > 50) {
				//$(".topSearch").val(curTab+"-"+curPage+"向右→滑动");
			}if (startTouchX - x > 50) {
				//$(".topSearch").val(curTab+"-"+curPage+"向左←滑动");
			}if (y - startTouchY > 0) {
			//	$(".topSearch").val(curTab+"-"+curPage+"向下↓滑动"+(y - startTouchY));
				if(scrolState=="top" && y - startTouchY>50){
					if(isDoLoad==true) return false;
					$touchCur.stop().animate({"height":"50px"},100);
					$touchCur.html("啦啦啦~~正在加载中~~~")
					isDoLoad=true;
				}
			}if (startTouchY-y > 50) {
			//	$(".topSearch").val(curTab+"-"+curPage+"向上↑滑动"); 
			}
		} catch (e) {
			alert('touchMoveFunc：' + e.message);
		}
	}

	var scrolState="top";
	//touchend事件  
	function touchEndFunc(evt) {
		try {
			//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
		//	$(".topSearch").val('TouchEnd事件触发');
			var $CPage=$touchCurPage;
			var divH=$CPage.height();
			var sH=$CPage[0].scrollHeight;
			var sT=$CPage[0].scrollTop;
			if(sT<=0)
				scrolState="top";
			else if(sT+divH>=sH)
				scrolState="bottom";
			else
				scrolState="center";
			if($CPage.children().first().height()>0){
				setTimeout(function(){
					$touchCur.stop().animate({height: "0px"}, 300);
					$touchCur.html("。。下拉加载新玩意儿。。");
					isDoLoad=false;
					loadPage(curTab.substring(curTab.length-1),curPage,10000);
				}, 1500);
			}
		} catch (e) {
			alert('touchEndFunc：' + e.message);
		}
	}

	//绑定事件  
	function bindEvent() {
		document.addEventListener('touchstart', touchSatrtFunc, false);
		document.addEventListener('touchmove', touchMoveFunc, false);
		document.addEventListener('touchend', touchEndFunc, false);
	}

	//判断是否支持触摸事件  
	function isTouchDevice() {
		//document.getElementById("version").innerHTML = navigator.appVersion;
		try {
			document.createEvent("TouchEvent");
			bindEvent(); //绑定事件  
		} catch (e) {
			alert("不支持TouchEvent事件！" + e.message);
		}
	}
</script>
<%@include file="../footer.jsp"%>
